<template>
  <div class="header">
    <div></div>
    <div style="display: flex">
      <el-dropdown>
        <span style="cursor: pointer">
          {{ username }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="onChangePassword"
            >修改密码</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <div class="quit" @click="handleQuit" title="Quit">
        <i class="el-icon-switch-button"></i>
      </div>
    </div>
    <Account ref="account" />
    <Password ref="password" />
  </div>
</template>
<script>
import { clearSessionStorage, localGet } from "@/util/util";
import Account from "@/components/account/list";
import Password from "@/components/account/password";

export default {
  data() {
    return {
      username: localGet("userInfo")?.realName,
      type: "",
    };
  },
  components: {
    Account,
    Password,
  },
  methods: {
    handleQuit() {
      this.$confirm("确定退出?", "", {
        type: "warning",
      }).then(() => {
        clearSessionStorage();
        this.$router.replace("/login");
      });
    },
    onGetAccountList() {
      this.$refs.account.init();
    },
    onChangePassword() {
      this.$refs.password.init();
    },
  },
};
</script>
<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.header {
  height: 60px;
  font-size: 14px;
  line-height: 60px;
  box-shadow: 0 1px 0 0 rgba(220, 222, 226, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding-right: 36px;
}

.quit {
  cursor: pointer;
  margin-left: 12px;
}

.quit:hover {
  color: #409eff;
}
</style>
